<template>
	<view v-if="show">
		<view class="date">
			<view class="date-left">
				<view class="date-item" v-for="(item,index) in reservationDate" :key="index"
					:class="{'date-item-active': index == currentDateIndex,'date-item-no': index != currentDateIndex}"
					@click="reservationDateClick(item,index)">
					<view class="date-week">
						{{ item.week }}
					</view>
					<template v-if="item.is_today">
						<view class="date-num">
							今天
						</view>
					</template>
					<template v-else>
						<view class="date-num">
							{{ item.date_sub }}
						</view>
					</template>

				</view>
			</view>
			<view class="date-right" @click="openCalendar">
				<image class="img-calendar" src="../../static/icon/calendar.png" mode=""></image>
				<image class="img-down" src="../../static/icon/down.png" mode=""></image>
			</view>
		</view>

		<view class="content">
			<view class="header">
				<view class="header-left">
					<view class="name">
						{{ info.name }}
					</view>
					<view class="address">
						{{ info.address }}
					</view>
				</view>
				<view class="header-right">
					<view class="distance">
						距离{{ info.distance }}km
					</view>
					<view class="img">
						<image src="../../static/icon/location.png" mode="" @click="locationClick"></image>
						<image src="../../static/icon/mobile.png" mode="" @click="mobileClick"></image>
					</view>
				</view>
			</view>

			<view class="content-times">
				<view class="times-item" v-for="(item,index) in reservationTime" :key="index" v-if="item.status != 3">
					<view class="item-box"
						:class="{'item-box-active': index == currentTimeIndex,'item-box-no': index != currentTimeIndex}"
						@click="reservationTimeClick(item,index)">
						<view class="time">
							{{item.time}}
						</view>
						<view class="text" v-if="item.status == 2">
							不可约
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="other">
				其余时段已约满
			</view> -->
		</view>

		<view class="footer">
			<view class="confirm-btn" @click="confirmClick">
				确定
			</view>
		</view>

		<uni-calendar ref="calendar" class="uni-calendar--hook" :date="calendar.date" :startDate="calendar.startDate"
			:insert="false" @confirm="calendarConfirm" @close="calendarClose" />
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				product_id: 0,
				product_sku_id: '',
				info: {},
				reservationDate: [],
				currentDateIndex: 0,
				reservationTime: [],
				currentTimeIndex: -1,
				calendar: {
					date: '',
					startDate: ''
				},
				selectReservationTime: '', //已选预约时间
			}
		},
		computed: {
			...mapGetters({
				location: 'user/location'
			})
		},
		onLoad(options) {
			this.product_id = options.product_id
			this.product_sku_id = options.product_sku_id
			this.calendar.startDate = getDate(new Date(), 0).fullDate
			this.calendar.date = getDate(new Date(), 0).fullDate

			this.getData()
		},
		methods: {
			getData() {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})

				_this.$api.get('meet/product.index/getStoreInfo', {
					product_id: _this.product_id,
					latitude: _this.location.latitude,
					longitude: _this.location.longitude
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.info = res.data
						_this.show = true
						_this.getReservationDate()
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.navigateBack({
									delta: 1
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
				}, fail => {})
			},
			getReservationDate(start_date = '') {
				let _this = this
				_this.$api.get('meet/product.index/reservationDate', {
					start_date: start_date
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.reservationDate = res.data.list
						_this.getReservationTime(_this.reservationDate[0].date)
					}
				}, fail => {})
			},
			getReservationTime(date) {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				_this.$api.get('meet/product.index/reservationTime', {
					store_id: _this.info.id,
					date: date
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.reservationTime = res.data.list
					}
				}, fail => {})
			},
			reservationDateClick(item, index) {
				if (this.currentDateIndex == index) {
					return false
				}

				this.currentDateIndex = index
				this.currentTimeIndex = -1
				this.selectReservationTime = ''
				this.calendar.date = item.date
				this.getReservationTime(item.date)
			},
			reservationTimeClick(item, index) {
				if (item.status == 2) {
					return false
				}

				if (this.currentTimeIndex == index) {
					return false
				}

				this.currentTimeIndex = index
				this.selectReservationTime = item.timestamp
			},
			mobileClick() {
				if (this.info.telephone) {
					uni.makePhoneCall({
						phoneNumber: this.info.telephone
					})
				}
			},
			locationClick() {
				uni.openLocation({
					latitude: parseFloat(this.info.latitude),
					longitude: parseFloat(this.info.longitude),
					scale: 16,
					address: this.info.address,
					success: function() {}
				})
			},
			openCalendar() {
				this.$refs.calendar.open()
			},
			calendarConfirm(e) {
				this.currentDateIndex = 0
				this.currentTimeIndex = -1
				this.selectReservationTime = ''
				this.calendar.date = e.fulldate
				this.getReservationDate(e.fulldate)
			},
			calendarClose() {

			},
			confirmClick() {
				let _this = this
				if (!_this.selectReservationTime) {
					_this.toast('请选择时间')
					return false
				}

				uni.navigateTo({
					url: '/pages/product/submit?product_id=' + _this.product_id + '&product_sku_id=' + _this
						.product_sku_id + '&reservation_time=' + _this.selectReservationTime
				})
			}
		}
	}

	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 200rpx;
	}

	.date {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background: linear-gradient(180deg, rgba(53, 209, 74, 0.15) 0%, rgba(246, 246, 246, 0) 100%);

		.date-left {
			width: 85%;
			display: flex;
			align-items: center;
			overflow-x: auto;
			white-space: nowrap;
			padding-left: 16rpx;
			padding-right: 26rpx;

			.date-item {
				min-width: 96rpx;
				height: 136rpx;
				border-radius: 6rpx;
				margin-right: 8rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #000000;

				.date-week {
					font-weight: 400;
					font-size: 20rpx;

				}

				.date-num {
					font-weight: 800;
					font-size: 24rpx;
				}
			}

			.date-item-no {
				background: #FFFFFF;
			}

			.date-item-active {
				background: #35D14A;
				color: #FFFFFF;
			}
		}

		.date-right {
			width: 15%;
			height: 136rpx;
			overflow: hidden;
			margin-left: 18rpx;
			background: #E7F3E9;
			box-shadow: -6rpx 0rpx 6rpx 2rpx rgba(52, 208, 73, 0.16);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.img-calendar {
				width: 32rpx;
				height: 30rpx;
			}

			.img-down {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}

	.content {
		margin: auto 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 6rpx;
		padding: 38rpx 26rpx;

		.header {
			display: flex;
			align-items: start;
			justify-content: space-between;

			.header-left {
				width: 80%;
				padding-right: 10rpx;

				.name {
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
				}

				.address {
					font-weight: 400;
					font-size: 20rpx;
					color: #8A8A8A;
					margin-top: 8rpx;
				}
			}

			.header-right {
				width: 20%;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				flex-direction: column;

				.distance {
					font-weight: 400;
					font-size: 20rpx;
					color: #8A8A8A;
				}

				.img {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.header-right image:first-child {
				margin-right: 28rpx;
			}
		}

		.content-times {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 58rpx;

			.times-item {
				width: 25%;
				height: 120rpx;
				margin-bottom: 20rpx;

				.item-box {
					width: 90%;
					height: 120rpx;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.time {
						font-weight: 800;
						font-size: 28rpx;
						color: #000000;
					}

					.text {
						font-weight: 400;
						font-size: 16rpx;
						color: #8A8A8A;
					}
				}

				.item-box-no {
					border: 2rpx solid #E0E0E0;
					background-color: #FFFFFF;
				}

				.item-box-active {
					background: rgba(53, 209, 74, 0.15);
					border: 2rpx solid #35D14A;

					.time {
						color: #35D14A;
					}
				}
			}
		}

		.other {
			width: 100%;
			height: 120rpx;
			border-radius: 8rpx;
			border: 2rpx solid #E0E0E0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			font-size: 28rpx;
			color: #8A8A8A;
		}
	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		padding: 30rpx 0;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.5);

		.confirm-btn {
			width: 80%;
			background: #000000;
			border-radius: 50rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 20rpx 0;
			text-align: center;
		}
	}
</style>